<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-08 10:48:44
 * @Description  : 其他设置
-->

<template>
  <div class="other-settings">
    <n-form
      ref="formRef"
      :label-width="200"
      :label-placement="menuShow ? 'left' : 'top'"
      label-align="left"
      :model="settings"
      size="small"
      require-mark-placement="left"
    >
      <n-form-item label="日期格式：" path="dataFormat">
        <n-select
          class="!w-[300px]"
          :value="settings.dataFormat"
          :options="dataFormatOptions"
          @update:value="(value: string) => handleChange('dataFormat', value)"
          placeholder="请选中日期格式"
        />

        <div class="ml-[12px] text-gray-400 text-[12px]">
          年月日时间格式显示,文件修改时间等处体现
        </div>
      </n-form-item>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import type { FormInst } from 'naive-ui'
import type { IndexObj } from '@/types/commom'

defineProps<{
  settings: IndexObj
  menuShow: boolean
}>()

const emits = defineEmits<{
  (e: 'changeSettings', key: string, value: string): void
}>()

const formRef = ref<FormInst | null>(null)

const handleChange = (key: string, value: string) => {
  emits('changeSettings', key, value)
}

const dataFormatOptions = ref(
  [
    'YYYY-MM-DD',
    'YYYY/MM/DD',
    'YYYY.MM.DD',
    'DD/MM/YYYY',
    'MM/DD/YYYY',
    'M DD,YYYY',
    'DD M,YYYY'
  ].map((item) => {
    return {
      label: item + '(' + dayjs().format(item) + ')',
      value: item + ' HH:mm:ss'
    }
  })
)
</script>

<style scoped lang="scss"></style>
